<template>
    <div id="index">
        <a-layout>
            <a-layout-sider collapsible v-model="collapsed" :trigger="null">
                <sysMenu :msg="msg"/>
            </a-layout-sider>
            <a-layout>
                <a-layout-header>Header</a-layout-header>
                <a-layout-content>
                    <router-view/>
                </a-layout-content>
                <a-layout-footer style="background-color: darkgray; padding: 2px; text-align: right">
                    <sysBottom/>
                </a-layout-footer>
            </a-layout>
        </a-layout>
    </div>
</template>
<script>
import sysMenu from '@/components/sysMenu';
import sysBottom from "@/components/sysBottom";

export default {
    name: 'index',
    components: {
        sysMenu,
        sysBottom
    },
    data() {
        return {
            collapsed: false,
            msg: "inline"
        }
    }
}
</script>
<style>
#index {
    height: 100%;
}

#index .ant-layout {
    height: 100%;
}

#index .ant-layout-sider {
    width: 10%;
    background: #7dbcea;
    color: #fff;
}

#index .ant-layout-header {
    background: #7dbcea;
    color: #fff;
    height: 10%;
}
</style>
